<template>
  <div class="settings-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-6 offset-md-3 col-xs-12">
          <h1 class="text-xs-center">Your Settings</h1>
          <!-- 修改个人信息错误的提示信息 -->
          <ul class="error-messages">
            <template v-for="(value, msg) in errors">
              <li v-for="(item, index) in value" :key="index">{{msg}} {{item}}</li>
            </template>
          </ul>
          <form @submit.prevent="onSubmit">
            <fieldset>
                <fieldset class="form-group">
                  <input class="form-control" v-model.trim="userInfo.image" required type="text" placeholder="URL of profile picture">
                </fieldset>
                <fieldset class="form-group">
                  <input class="form-control form-control-lg"  v-model.trim="userInfo.username" required type="text" placeholder="Your Name">
                </fieldset>
                <fieldset class="form-group">
                  <textarea class="form-control form-control-lg"  v-model.trim="userInfo.bio" required rows="8" placeholder="Short bio about you"></textarea>
                </fieldset>
                <fieldset class="form-group">
                  <input class="form-control form-control-lg"  v-model.trim="userInfo.email" required type="text" placeholder="Email">
                </fieldset>
                <fieldset class="form-group">
                  <input class="form-control form-control-lg"  v-model.trim="userInfo.password"  type="password" placeholder="Password">
                </fieldset>
                <button class="btn btn-lg btn-primary pull-xs-right" :disabled='submitDisabled'> Update Settings </button>
            </fieldset>
          </form>
          <button class="btn btn-outline-danger" @click="logout"> Or click here to logout. </button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { userSetting } from '@/api/user'
// 仅在客户端加载 js-cookie 包
const Cookie = process.client ? require('js-cookie') : undefined
export default {
  middleware: 'authenticated',
  data(){
    return{
      submitDisabled: false,// 提交按钮是否禁用
      userInfo: {
        email: '', // 邮箱
        username: '', // 用户名
        password: '', // 密码
        image: '',// 头像地址
        bio: '' // 简介
      },
      errors: null
    }
  },
  computed: {
    ...mapState('user', { user: 'user'})
  },
  created(){
    const { username, email, image, bio } = this.user
    const obj =  { username, email, image, bio }
    // 反绑信息
    this.userInfo = {...obj}
  },
  methods:{
     // 引入mutations中的setUser方法
    ...mapMutations({setUser: 'user/setUser'}),
    // 修改个人信息
    onSubmit(){
      this.submitDisabled = true
      userSetting(this.userInfo).then((res)=>{
        // 在vuex中保存用户登录状态
        this.setUser(res.user)
        // 在cookie中保存信息 把数据持久化
        Cookie.set('user', res.user)
        // 跳转至个人中心页面
        this.$router.push({name: 'profile', params: {username: res.user.username}})
      }).catch(err=>{
        this.errors = err
      })
      .finally(()=>{
        this.submitDisabled = false
      })
    },
    // 退出登录
    logout(){
      // 在vuex中清空用户登录状态
      this.setUser(null)
      // 在cookie中清空信息 把数据持久化
      Cookie.remove('user');
      // 跳转至登录页
      this.$router.push('/login')
    }
  }
}
</script>